<template>
  <div class="camera-wutai">
    <div class="camera-ul" :style="[cameraUlStyleObj,paused]">
      <div v-for="(item,index) in list" :key="index" class="camera-li" :style="styleObj(index)">
        <div
            class="camera-img-box"
            :style="[paused]"
            :class="[imgStyleObj(index),
            {'camera-status-0':item.task.taskState===0},
            {'camera-status-1':item.task.taskState===1},
            {'camera-status-2':item.task.taskState===2},
            {'camera-status-3':item.task.taskState===3}
            ]"
            @mouseover="mouseOverEvent"
            @mouseout="mouseOutEvent"
            @click="tapCam(item, index + 1)">
          <div class="img-dom-1">
            <div class="app-name">{{ item.appName }}</div>
            <!--<div class="app-sub">{{ item.appScene }}</div>-->
          </div>
          <div class="num-box">{{ item.pluginsNum }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'PanoRotate',
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      itemHover: false
    }
  },
  computed: {
    camListNum() {
      return this.list.length || 0
    },
    cameraUlStyleObj() {
      if (this.list && this.list.length) {
        return {}
      } else {
        return {
          animationPlayState: 'paused'
        }
      }
    },
    paused() {
      if (this.itemHover) {
        return {'animation-play-state': 'paused'}
      } else {
        return {}
      }
    }
  },
  mounted() {
    setTimeout(() => {
      console.log(this.list)
    }, 1000)
  },
  methods: {
    styleObj(index) {
      const degp = 360 / this.camListNum
      return {
        transform: `rotateY(${degp * index}deg) translateZ(${260}px)`
      }
    },
    imgStyleObj(index) {
      return [`camera-cir${this.camListNum}-${index + 1}`]
    },

    mouseOverEvent() {
      this.itemHover = true
    },
    mouseOutEvent() {
      this.itemHover = false
    },
    // 摄像机播放
    tapCam(item, index) {
      this.$emit('handelBall', item.id, index, item)
    }
  }
}
</script>

<style scoped lang="scss">
  @import "../../../assets/css/app";

  /*$app-runing: #077CF6;
  $app-success: #17A9A8;
  $app-error: #E15A5A;
  $app-default: #3F5C7B;*/
  $app-runing: rgba(#077cf6, 1);
  $app-success: rgba(#17A9A8, 1);
  $app-error: rgba(#E15A5A, 1);
  $app-default: rgba(#3F5C7B, 1);

  .camera-wutai {
    position: absolute;
    left: 0;
    bottom: 40%;
    margin: 0 auto;
    width: 100%;
    height: 50%;
    perspective: 1000px;
    perspective-origin: 50% -105%;
    transform-style: preserve-3d;

    .camera-all {
      width: 200px;
      height: 200px;
      cursor: pointer;
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      z-index: 200;
    }

    .camera-ul {
      width: 1px;
      height: 1px;
      position: relative;
      margin: 0 auto;
      top: 100px;
      transform-style: preserve-3d;
      animation: cameracylinder 20s linear infinite;
    }

    .camera-li {
      width: 1px;
      height: 1px;
      position: absolute;
      font-size: 0;
      color: white;
      transform-style: preserve-3d;
      cursor: pointer;

      .camera-img-box {
        width: 208px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        /*background-image: url("~@/assets/img/indexHome/slices/card-1.png");*/
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 10px;
        padding: 7px;
        /*transform: scale(0.5);*/
        background-color: $app-runing;

        &.camera-status-0 {
          background-color: $app-success;
        }

        &.camera-status-1 {
          background-color: $app-runing;
        }

        &.camera-status-2 {
          background-color: $app-error;
        }

        &.camera-status-3 {
          background-color: $app-default;
        }

        .img-dom-1 {
          display: flex;
          flex: 1;
          padding: 5px;
          flex-direction: column;
          justify-content: center;

          .app-name {
            /*margin-bottom: 10px;*/
            font-size: 20px;
            text-align: center;
          }

          .app-sub {
            font-size: 14px;
          }
        }

        .num-box {
          white-space: nowrap;
          width: 40px;
          height: 40px;
          font-size: 18px;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          border: solid 1px #ffffff;
        }
      }
    }
  }

  /*摄像机圆柱*/
  @keyframes cameracylinder {
    0% {
      transform: rotateY(0deg)
    }
    25% {
      transform: rotateY(90deg)
    }
    50% {
      transform: rotateY(180deg)
    }
    75% {
      transform: rotateY(270deg)
    }
    100% {
      transform: rotateY(360deg)
    }
  }

</style>